@import 'nib'
@import './public/stylesheets/variable'
// 统一浏览器默认样式
normalize-css() 

:focus 
  outline: -webkit-focus-ring-color auto 0px;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 0px;

// 基本样式
body 
  background-color $bg_color
  margin 0
  color $text_color
  font 14px/2 "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif

a
  color $link_color
  vertical-align middle
  &:link
    text-decoration none 
  &:hover
    color $main_color
  
img
  vertical-align top
ul
ol
  list-style none
  margin 0
  padding-left 0

h1
h2
h3
h4
h5
h6 
p
  margin 0

// input 禁用状态鼠标形状
html input[disabled]
button[disabled]
  cursor not-allowed

// 通用样式
.small  // 小号字体
  font-size .8em

.hide  // 隐藏
  display none

.clearfix  // 清除浮动
  zoom 1
  &:after 
    display block
    content ''
    clear both
    visibility hidden
    height 0 

.text  // 字体颜色
  &-error  
    color #c40000
  &-main
    color $main_color
  &-muted
    color #888
  //  默认文字样式
  &-normal
    font-style normal
    font-weight normal
  &-delete
    text-decoration line-through
  // 垂直居中
  &-middle
    vertical-align middle
    
.w-auto // 还原默认宽度
  width auto!important
// 浮动
.float
  &-l
    float left
  &-r
    float right
// 间隔
.interval 
  &-r
    margin-right .5em
  &-l
    margin-left .5em

// 组件

// 标签
.label
  display inline
  border-radius .25em 
  padding .2em .5em 
  text-align center
  font-weight normal
  &-primary
    background-color $main_color
    color #efefef 
    &:hover
      background-color darken(@background-color, 5)  
      color #fff
  &-default
    background-color #e5e5e5
    color #999
    &:hover
      background-color darken(@background-color, 5)  
      color #fff
  

// alert 提示框
.alert
  border 1px solid #ccc
  padding 10px 20px
  margin-bottom 1em
  &-success
    border-color #d6e9c6
    background-color #dff0d8
    color #468847
  &-error
    color #b94a48
    background-color #f2dede
    border-color #eed3d7

// panel 面板
.panel
  border 1px solid #ddd
  background-color #fff
  box-shadow 0px 1px 1px 0px rgba(#ddd,.3)
  margin-bottom 10px
  border-radius 5px
  &-hd
    background-color #f5f5f5
    border-radius 4px 4px 0 0 
    border-bottom 1px solid #ddd
    height 40px
    line-height @height
    font-size 1.1em
    padding-left 1em
    color darken($main_color, 20)
  &-bd
    padding 1em
    border-radius bottom 5px
  &-danger
    border-color #ebccd1
    box-shadow 0px 1px 1px 0px rgba(@border-color,.3)
    .panel-hd 
      color #a94442
      background-color #f2dede
      border-color @border-color
  &-success
    border-color #2196f3
    box-shadow 0px 1px 1px 0px rgba(@border-color,.3)
    .panel-hd 
      color #fff
      background-color @border-color
      border-color @border-color

// 列表
.list
  // list容器
  &-bd 
    padding 0 0 .5em 0
    .list>li
      padding-left 1em
      padding-right 1em
  li
    padding-top .5em
    padding-bottom .5em
    border-bottom 1px solid #eee
    &:last-child
      border-bottom none
  &-striped
    li:nth-child(2n)
        background-color #f9f9f9
// page 分页
.page
  margin-top 15px
  padding-left 15px
  font-size 0
  li
    display inline-block
    border 1px solid #ddd
    border-right none
    color #555
    font-size 14px
    &>a 
    &>span
      display block
      padding 0 .5em
      color @color
    &>span
      color $main_color
    &:first-child
      border-radius left 3px
    &:last-child
      border-right 1px solid #ddd
      border-radius right 3px 

// form 表单
.form 
  .control-label
      display inline-block
  &-group
    margin-bottom 1em
  &-help
    vertical-align middle
  &-control
    border 1px solid #ddd
    border-radius 3px
    padding 5px 8px
    height 34px
    width 100%
    box-shadow inset 0 1px 1px rgba(0,0,0,0.075)
    vertical-align middle
    box-sizing border-box
    &:focus
      border-color rgba($main_color, .8)
      box-shadow 0 1px 2px 0 rgba($main_color, .5)
      outline 0
    textarea&
      min-height 80px
      vertical-align top
  // 水平表单
  @media screen and (min-width:770px)
    &-horizontal 
      .control-label
        width 150px
        text-align right
      .form-control
        width 300px

// btn 按钮
btn-style($color, $text_color = #fff) 
  background-color $color
  border-color $color
  color $text_color
  &:hover
    background-color darken(@background-color, 10)
    color @color
  &[disabled] 
    background-color desaturate(@background-color, 60%)
    border-color desaturate(@border-color, 60%)
.btn 
  border 1px solid #ddd
  border-radius 4px
  padding 3px 12px
  background-color #fff
  display inline-block
  color #fff
  &:visited
    color @color
  &:hover
    background-color #ddd
  &-primary
    btn-style($main_color)
  &-danger 
    btn-style(#d9534f)
  &-block
    display block
    text-align center
  
// 框架布局
.wp
  max-width 1200px
  margin 0 auto
  padding 10px 
  &-left
    margin-right 310px
    overflow hidden
  &-right
    float right
    width 300px
  @media screen and (max-width:960px)
    &-right
      width 200px
    &-left 
      margin-right 210px
  @media screen and (max-width:700px)
    &-right
      display none
    &-left 
      margin-right auto


//  顶部
#header
  background-color $header_bg
  height 50px  
  color #eee
  box-shadow 0 1px 2px 1px rgba($header_bg, .5)
  .wp
    padding-top 0
    padding-bottom 0
  .logo
    font-size 1.5em
    line-height @height
    color #fff
    img 
      margin-top 10px
// 导航菜单
.nav
  &-btn 
    display none
  @media screen and (max-width:700px)
    &-btn
      display block
      float right
      color #fff
      background-color darken($header_bg, 20)
      border-color #666
      line-height 1
      padding 5px 8px
      margin 10px 0 auto 5px  
      font-size 1.3em
      &:hover 
        background-color $header_bg
  &-user
    float right
    margin 0
    line-height 50px
    li
      display inline-block
      a
        color #fff
        &:hover
          color $main_color
      &:after 
        content '|'
        color darken($main_color, 30)
        padding 0 .5em
      &:last-child:after
        display none
    
    .message
      position relative
      &>.sub 
        position absolute
        background-color #01abb3
        color #fff
        border-radius 50%
        display block
        width 1em 
        line-height 1
        height @width
        right -1em
        top -.5em
        padding: .1em;
        text-align center
    
  @media screen and (max-width:700px)
    &-user
      display none
      position absolute
      top 50px
      left 0
      width 100%
      background-color $header_bg
      li 
        display block
        text-align center
        border-bottom 1px solid lighten($header_bg, 10)
        &:after 
          display none
        &>a 
          display block
  
// 底部
#footer
  margin-top 1em
  p 
    margin 0 
    color #999
    font-size .9em        

    
// 错误提示页面
.error
  &-box 
    width 50%
    margin 10px auto
    .jump
      font-size .8em
      color #888
      &:hover 
        color #d00
 
      
// modal 
.modal 
  position fixed
  z-index 9999
  width 560px
  top 0
  left 50%
  display none
  margin-left - (@width / 2)
  background-color #fff
  border 1px solid #eee
  border-radius 5px
  opacity 0
  transition top .3s linear, opacity .3s linear
  &-header 
    padding 9px 15px 
    border-bottom 1px solid #eee
    border-radius 5px 5px 0 0 
    .close 
      float right 
      line-height 1 
      border none 
      background none
      font-size 20px 
      text-shadow 0 1px 0 #fff
      opacity .2
  &-body 
    padding 10px
    position relative
  &.show 
    top 100px
    opacity 1
  &-mask 
    position fixed 
    top 0
    left 0
    height 100%
    width 100% 
    z-index 9998
    background-color #000
    opacity 0
    transition opacity .2s linear 
    &.show
      opacity .8
  &-footer 
    border-top 1px solid #eee
    padding 10px
    text-align right
  @media screen and (max-width:420px)
    & 
      width 300px
      margin-left -150px

// breadcrumb 面包屑导航
.breadcrumb 
  overflow hidden
  li
    float left
    &:before 
      content "/"
      padding 0 .5em
      color #999
    &:first-child:before 
      display none

